<template>
    <div class="layout-container flex-col">
        <!-- 页面头部：标题与定位 -->
        <div class="header flex-col">
            <h1>广电视听行业时空数据分析系统</h1>
            <p>广电视听行业数据研究支撑平台的智能分析中枢</p>
        </div>

        <!-- 1. 系统定位与价值 -->
        <section class="section section1 flex-col">
            <h2>
                <el-icon color="blue">
                    <Position />
                </el-icon>
                系统定位与核心价值
            </h2>

            <div>
                时空数据分析系统是融合
                <span class="blue">时间、空间、数据建模</span>
                的智能分析系统，位于广电视听行业数据研究支撑平台的
                <span class="blue">能力支撑层</span>
                ，承担三大核心角色：
            </div>

            <div class="flex-row">
                <el-card>
                    <template #header>
                        <h4>数据价值挖掘器</h4>
                    </template>
                    <p>整合分散于时间与空间维度的行业数据，挖掘数据隐藏规律与潜在价值</p>
                </el-card>

                <el-card>
                    <template #header>
                        <h4>决策赋能引擎</h4>
                    </template>
                    <p>将时空数据转化为可操作的决策依据，解决传统分析决策响应滞后问题</p>
                </el-card>

                <el-card>
                    <template #header>
                        <h4>业务协同纽带</h4>
                    </template>
                    <p>连接多业务部门，提供标准化分析服务，提升资源利用效率与业务协同性</p>
                </el-card>
            </div>
        </section>

        <!-- 2. 核心算法模块矩阵 - 双列布局与新风格 -->
        <section class="section section2 flex-col">
            <h2>
                <el-icon color="blue">
                    <Crop />
                </el-icon>
                核心算法模块矩阵
            </h2>

            <div>系统集成7大算法分类、26项核心算法，覆盖广电视听行业全场景数据分析需求，支持算法自定义组合与扩展：</div>

            <!-- 算法模块网格 - 双列布局与新卡片风格 -->
            <div class="grid2">
                <!-- 时间序列分析 -->
                <el-card>
                    <template #header>
                        <h4>时间序列分析</h4>
                    </template>
                    <ul>
                        <li>多项式拟合：基于历史数据拟合趋势曲线</li>
                        <li>移动平均：平滑数据波动，识别短期趋势</li>
                        <li>线性回归：分析变量间线性关联与预测</li>
                        <li>指数平滑：加权处理历史数据，预测未来值</li>
                    </ul>
                </el-card>

                <!-- 结构分析 -->
                <el-card>
                    <template #header>
                        <h4>结构分析</h4>
                    </template>
                    <ul>
                        <li>占比分析：计算各部分占整体比例</li>
                        <li>帕累托分析：识别关键影响因素（20/80法则）</li>
                        <li>构成比分析：分析数据内部组成结构</li>
                        <li>结构变化分析：监测数据结构动态变化</li>
                        <li>贡献度分析：评估各部分对整体的影响程度</li>
                    </ul>
                </el-card>

                <!-- 空间分析 -->
                <el-card>
                    <template #header>
                        <h4>空间分析</h4>
                    </template>
                    <ul>
                        <li>局部LISA分析：识别局部空间关联模式</li>
                        <li>核密度估计：展示数据空间分布密度</li>
                        <li>全局Moran：分析数据整体空间自相关性</li>
                    </ul>
                </el-card>

                <!-- 分组分析 -->
                <el-card>
                    <template #header>
                        <h4>分组分析</h4>
                    </template>
                    <ul>
                        <li>分位数分组：按数据分布分位划分层级</li>
                        <li>自然断点分组：按数据自然差异划分区间</li>
                        <li>等间隔分组：按固定间隔划分数据范围</li>
                        <li>自定义规则分组：支持业务个性化分组逻辑</li>
                    </ul>
                </el-card>

                <!-- 聚类与分类分析 -->
                <el-card>
                    <template #header>
                        <h4>聚类与分类分析</h4>
                    </template>
                    <ul>
                        <li>K-means聚类：基于距离划分相似数据群体</li>
                        <li>层次聚类：构建数据层级聚类结构</li>
                        <li>密度聚类：按数据密度识别聚类群体</li>
                        <li>相关性聚类：基于变量相关性分组数据</li>
                    </ul>
                </el-card>

                <!-- 探索性分析 -->
                <el-card>
                    <template #header>
                        <h4>探索性分析</h4>
                    </template>
                    <ul>
                        <li>Z-score分析：识别数据异常值</li>
                        <li>变量关系分析：计算协方差、相关系数，挖掘变量关联</li>
                        <li>DBSCAN聚类：基于密度检测数据异常模式</li>
                    </ul>
                </el-card>

            </div>
            <!-- 描述性分析 -->
            <el-card>
                <template #header>
                    <h4>
                        <el-icon color="blue">
                            <MostlyCloudy />
                        </el-icon>
                        描述性分析
                    </h4>
                </template>
                <div class="flex-row">
                    <ul>
                        <li>分布形态分析：通过频率、峰度、偏度描述数据分布</li>
                    </ul>
                    <ul>
                        <li>离散程度分析：计算标准差、方差、极差，评估数据离散度</li>
                    </ul>
                    <ul>
                        <li>集中趋势分析：通过均值、中位数、众数描述数据中心位置</li>
                    </ul>
                </div>
            </el-card>
        </section>

        <!-- 3. 系统应用价值 -->
        <section class="section section3 flex-col">
            <h2>
                <el-icon color="blue">
                    <PictureRounded />
                </el-icon>
                行业应用价值
            </h2>
            <!-- 价值卡片 -->
            <div class="grid2">
                <el-card>
                    <template #header>
                        <h4>破解传统分析痛点</h4>
                    </template>
                    <p>解决动态关联分析不足、决策响应滞后、资源利用低效等问题，提升数据分析时效性与准确性</p>
                </el-card>

                <el-card>
                    <template #header>
                        <h3>推动行业转型</h3>
                    </template>
                    <p>助力广电视听行业从「经验驱动」向「数据智能驱动」跨越，支撑行业高质量发展</p>
                </el-card>
                <el-card>
                    <template #header>
                        <h3>赋能业务决策</h3>
                    </template>
                    <p>为业务部门提供全方位、全量级应用支持，深度洞察数据关系与规律，辅助决策者科学决策</p>
                </el-card>
                <el-card>
                    <template #header>
                        <h3>支持定制化需求</h3>
                    </template>
                    <p>支持算法新建组合与扩展，预置行业专题模型，实现「开箱即用」与个性化分析双重能力</p>
                </el-card>
            </div>
        </section>

        <!-- 页面底部 -->
        <footer>© 2024 广电视听行业数据研究支撑平台 | 时空数据分析系统</footer>
    </div>
</template>

<script setup>
import { Crop, MostlyCloudy, PictureRounded, Position } from "@element-plus/icons-vue"
</script>

<style lang="scss" scoped>
.layout-container {
    background-color: #eef0f3;
    gap: 10px;

    .header {
        background: white;
        border-radius: 5px;
        padding: 10px 400px;
    }

    .section {
        text-align: left;
        gap: 20px;
        background: white;
        border-radius: 5px;
        padding: 10px 400px;
    }

}

// 新卡片风格
.el-card {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    overflow: hidden;
    padding: 5px;
    margin: 10px;

    &:hover {
        cursor: default;
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(22, 93, 255, 0.1);
    }
}

.blue {
    color: #409eff;
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 auto;
}
</style>

